<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fcd{
           height: 70px;
           width: 100px;
           border: 1px solid black;
       }
       .fcdiv{
           height: 100px;
           width: 100px;
           position: absolute;
           left: 0;
           display: none;
           /* background: palevioletred; */
           /* opacity: 0.5; */
           
       }
       .fcdiv button{
           height: 100px;
           width: 100px;
           background: pink;
       }
       img{
           height: 100px;
           width: 100px;
       }
       h1{
           margin: 20px;
           font-weight: bolder;
           font-size: larger;
       }
       #fcbtn{
           width: 100px;
           display: inline-block;
           height: 30px;
           margin-bottom: 20px;
           line-height: 30px;
           border: 1px solid gray;
       }
        #testa{
            display: inline-block;
            width: 88px;
            height: 88px;
            border: 1px solid red;
            text-align: center;
       }
        #testa button{
            margin-top: 5px;
            border: 1px solid red;
        }
        #a1{
           display: block;
           width: 100px;
           height: 130px;
       }
       #a2{
           margin-top: 10px;
           display: block;
           width: 100px;
           height: 130px;
           background: yellowgreen;
       }
       #over{
           display: block;
           width: 100px;
           height: 130px;
           background: orange;
           border: 4px solid black;
           overflow: hidden;
       }
       .title{
           margin: 10px auto;
           line-height: 20px;
           height: 20px;
       }
    </style>
        <script src='./defineindex.js'></script>      

    

<script type='text/javascript'>
    !function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)}(window,document,"script","assets.giocdn.com/2.1/gio.js","gio");
      gio('init','a080fbb51e654818', {});
    
    //custom page code begin here
    
    //custom page code end here
    
    gio('send');
    
    </script>      
</head>
<body>
    <div>
        <div class="title">
            subelements 测试
        </div>
        <a href="" id='testa'>
            <div>
                <button>button</button>
            </div>
            <div>
                <button>button</button>
            </div>
            <div>
                <button>button</button>
            </div>
            <div>
                <span>span</span>
            </div>
        </a>
    </div>
    <div>
        <div class="title">
            overflow
        </div>
        <div>
            <div id="over">
                <a id="a1">a1</a>
                <a id="a2">a2</a>
            </div>
        </div>
    </div>
    <div>
        <div class="title">
            浮层测试 display
        </div>
            <div>
                <div id="fcbtn">点击显示浮层</div>
                <div>
                    <div id='fc' class="fcdiv">
                        <button>我是浮层 button</button>
                    </div>
                </div>
                <div>
                    <div>
                        <div>
                            <button class="fcd">我是底部 button</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <script>
            var clickflag = false;
            fcbtn.onclick = function(){
                if(!clickflag){
                    fc.style.display = 'block';
                    clickflag = true;
                }else{
                    fc.style.display = 'none';
                    clickflag = false;  
                }
            }
    </script>
</body>
</html>




<!-- <!DOCTYPE html>
<html lang="zh-CN" class="pad" style="font-size: 82.2667px;">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>叮咚课堂</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="dns-prefetch" href="https://source.ddkt365.com/">
    <link rel="dns-prefetch" href="https://resource.ddkt365.com/">
    <link rel="dns-prefetch" href="https://sc.ddkt365.com/">
    <link href="./叮咚课堂_files/common.42b427d8.css" rel="stylesheet">
    <link href="./叮咚课堂_files/app.752def2f.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./叮咚课堂_files/change9yuan95lessonIndex.112030a2.css">
    <script src='./defineindex.js'></script>      

    <script charset="utf-8" src="./叮咚课堂_files/change9yuan95lessonIndex.112030a2.js"></script>



<script type='text/javascript'>
    !function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)}(window,document,"script","assets.giocdn.com/2.1/gio.js","gio");
      gio('init','86107036e5a936fd', {});
    
    //custom page code begin here
    
    //custom page code end here
    
    gio('send');
    
    </script>
    
       
    <style>
         #parent{

/* margin: 50px auto; */
padding: 0;
width: 300px;
height: 309px;
}


#uls{
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
width: 300px;
height: 309px;
overflow: hidden;
}

#img_ul{
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 1800px;           /*多留出一张图片的宽度！*/
list-style: none;
}
#img_ul li{
float: left;
margin: 0;
padding: 0;
width: 300px;
height: 309px;
}
#img_ul li a img{
width: 300px;
height: 309px;
}

#litCir_ul{
position: absolute;
margin: 0;
padding: 0;
right: 10px;
bottom: 10px;
list-style: none;
}
#litCir_ul li{
margin: 0;
padding: 0;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%; 
margin-left:10px ;
cursor: pointer;
}

li.active{
background-color: white;
}
li.quiet{
background-color: #1e90ff;
}
#testa{
    display: inline-block;
    width: 88px;
    height: 88px;
    border: 1px solid red;
    text-align: center;
}
#testa button{
    margin-top: 5px;
    border: 1px solid red;
}
    </style>
</head>

<body>
    <div>subelements 测试</div>
    <a href="" id='testa'>
        <div>
            <button>button</button>
        </div>
        <div>
            <button>button</button>
        </div>
        <div>
            <button>button</button>

        </div>
    </a>
    <div data-v-6408efb7="" class="viewport-wrap-box">
        <div data-v-71055817="" data-v-6408efb7="" class="five-lesson">
            <div data-v-71055817="" class="header">
                <div>
                    <div id= "parent" >
        
                        <div id="uls" >
                            
                            <ul id="img_ul" style="display: inline-block;">
                                <li><a id='lia1' href=""><img data-sensors-click src="叮咚课堂_files/head-bg-1.png"/></a></li>
                                <li><a id='lia2' href=""><img data-sensors-click src="叮咚课堂_files/head-bg-2.png"/></a></li>
                                <li><a id='lia3' href=""><img data-sensors-click src="叮咚课堂_files/head-bg-1.png"/></a></li>
                                <li><a id='lia4' href=""><img data-sensors-click src="叮咚课堂_files/head-bg-2.png"/></a></li>
                                <li><a id='lia5' href=""><img data-sensors-click src="叮咚课堂_files/brand-2.png"/></a></li>
                            </ul>
                            <ul id='litCir_ul'></ul>
                        </div>
                        <div id="buttons">
                            <span id="left">&lt;</span>
                            <span id="right">&gt;</span>
                        </div>
                    </div>
                </div>
                <div data-v-71055817="" data-sensors-click  class="title-wrapper">
                    <div data-v-71055817="" class="course-title"><span data-v-71055817=""
                            class="mark">包邮</span>叮咚课堂精美外教体验课5节·赠随材大礼包</div>
                    <div data-v-71055817="" class="course-title">北美外教|在家学|适合5-10周岁孩子学习</div>
                </div>
            </div>
            <div data-v-71055817="" class="section">
                <div data-v-71055817="" class="product-detail">
                    <div data-v-71055817="" class="item">
                        <div data-v-71055817="" class="label" data-sensors-click>赠品</div>
                        <div data-v-71055817="" class="content">配套教材礼包*1（全国包邮）</div>
                        <div data-v-71055817="" class="check" data-sensors-click>查看</div>
                    </div>
                    <div data-v-71055817="" class="item">
                        <div data-v-71055817="" class="label" data-sensors-click>促销</div>
                        <div data-v-71055817="" class="content">
                            <div data-v-71055817="" class="line">
                                <div data-v-71055817="" class="limited" data-sensors-click>限时特惠</div>
                                <a href="">9.9元5节外教课</a>
                            </div>
                            <div data-v-71055817="" class="line" data-sensors-click>
                                <div data-v-71055817="" class="limited" data-sensors-click>限购</div>每人限购一次
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div data-v-71055817="" class="section">
                <div data-v-71055817="" class="questions">
                    <div data-v-71055817="" class="bar">
                        <div data-v-71055817="" class="left" data-sensors-click>问大家</div>
                        <div data-v-71055817="" class="right" data-sensors-click>查看全部</div>
                    </div>
                    <div data-v-71055817="" class="content-wrapper">
                        <ul data-v-71055817="" class="content" style="top: -2.14rem;">
                            <li data-v-71055817="" class="item"><span data-v-71055817="" class="label"></span> <span
                                    data-v-71055817="" class="text" data-sensors-click>孩子喜欢学吗？课程效果好不好？</span>
                                <div data-v-71055817="" class="number" data-sensors-click>3个回答</div>
                            </li>
                            <li data-v-71055817="" class="item"><span data-v-71055817="" class="label"></span> <span
                                    data-v-71055817="" class="text" data-sensors-click>一节课多长时间啊？孩子坐得住吗？</span>
                                <div data-v-71055817="" class="number" data-sensors-click>1个回答</div>
                            </li>
                            <li data-v-71055817="" class="item"><span data-v-71055817="" class="label"></span> <span
                                    data-v-71055817="" class="text" data-sensors-click>包邮赠送教材礼盒是真的吗？多久可以收到？</span>
                                <div data-v-71055817="" class="number" data-sensors-click>2个回答</div>
                            </li>
                            <li data-v-71055817="" class="item"><span data-v-71055817="" class="label"></span> <span
                                    data-v-71055817="" class="text" data-sensors-click >上课形式是怎样的？购买后如何上课？</span>
                                <div data-v-71055817="" class="number" data-sensors-click>1个回答</div>
                            </li>
                            <li data-v-71055817="" class="item"><span data-v-71055817="" class="label"></span> <span
                                    data-v-71055817="" class="text" data-sensors-click data-sensors-click>如何添加老师？一般多久通过好友申请？</span>
                                <div data-v-71055817="" class="number" data-sensors-click>1个回答</div>
                            </li>
                            <li data-v-71055817="" class="item"><span data-v-71055817="" class="label"></span> <span
                                    data-v-71055817="" class="text" data-sensors-click>孩子喜欢学吗？课程效果好不好？</span>
                                <div data-v-71055817="" class="number" data-sensors-click>3个回答</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div data-v-71055817="" class="section brand-section">
                <div data-v-71055817="" class="brands-wrapper"><img data-v-71055817="" src="./叮咚课堂_files/brand-1.png"
                        alt="" class="brand-img"> <img data-v-71055817="" data-sensors-click  src="./叮咚课堂_files/brand-2.png" alt=""
                        class="brand-img"> <img data-v-71055817="" data-sensors-click src="./叮咚课堂_files/brand-3.png" alt=""
                        class="brand-img"> <img data-v-71055817=""  src="./叮咚课堂_files/brand-4.png" alt=""
                        class="brand-img"> <img data-v-71055817=""  src="./叮咚课堂_files/brand-5.png" alt=""
                        class="brand-img"></div>
            </div>
            <div data-v-71055817="" class="fixed-bot">
                <div data-v-71055817="" class="inner">
                    <div data-sensors-click data-v-71055817="" class="price"><span data-v-71055817="" class="symbol">￥</span>9.9<span
                            data-v-71055817="" class="text">元/5节北美外教AI课</span></div> <button data-v-71055817=""
                        class="btn" data-sensors-click>立即购买</button>
                </div>
            </div>
            <div data-v-71055817="" class="gift" style="display: none;">
                <div class="shelter"></div>
                <div class="gift-outer-content">
                    <div class="close"></div>
                    <div class="gift-inner">
                        <div class="title">赠品</div>
                        <div class="gift-content">
                            <div class="left"><img src="./叮咚课堂_files/product-img.png" alt="" class="gift-img">
                                <div class="gift-item">·21天儿童成长计划表*1份</div>
                                <div class="gift-item">·叮咚小狮子贴纸*1份</div>
                            </div>
                            <div class="right">
                                <div class="gift-title">教材礼包</div>
                                <div class="gift-item">·AI北美外教课*5节</div>
                                <div class="gift-item">·随机精美英文绘本*5本</div>
                                <div class="gift-item">·铅笔*10支</div>
                                <div class="gift-item">·橡皮擦*1个</div>
                                <div class="gift-item">·卷笔刀*1个</div>
                                <div class="gift-item">·精美字母练字帖*1份</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div data-v-53a1e929="" data-v-71055817="" class="questions" style="display: none;">
                <div data-v-53a1e929="" class="shelter"></div>
                <div data-v-53a1e929="" class="question-content">
                    <div data-v-53a1e929="" class="close"></div>
                    <div data-v-53a1e929="" class="question-inner">
                        <ul data-v-53a1e929="" class="types">
                            <li data-v-53a1e929="" class="item active">全部</li>
                            <li data-v-53a1e929="" class="item">效果</li>
                            <li data-v-53a1e929="" class="item">时间</li>
                            <li data-v-53a1e929="" class="item">礼盒</li>
                            <li data-v-53a1e929="" class="item">上课</li>
                            
                        </ul>
                        <ul data-v-53a1e929="" class="list">
                            
                            <li data-v-53a1e929="" class="item">
                                <div data-v-53a1e929="" class="title">
                                    <div data-v-53a1e929="" class="title-label"></div>
                                    <div data-v-53a1e929="" class="text">孩子喜欢学吗？课程效果好不好？</div>
                                </div>
                                <ul data-v-53a1e929="" class="content">
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">
                                            目前课程做的很成功哦，AI北美外教上课，孩子喜欢跟外教老师互动说英语，课上还会给予孩子星星激励，每次课程结束的时候都不让，要主动跟老师说bye bye
                                        </div>
                                    </li>
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">
                                            我真的觉得叮咚课堂挺有用的，开始我闺女一年级的英语课可以用鸡飞狗跳来形容，一年下来，啥都没学会。这个课程刚开始也是我和她一起学，十几节课下来，她已经可以自己独立上课了，老师教的也很好，每天都学还能循环形成记忆习惯，反正对比下来英语比以前强太多了~
                                        </div>
                                    </li>
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">
                                            现在上课一点都不用我操心，自己看时间去约课，有空就玩那个学习乐园的单词游戏，特别喜欢doug老师的课</div>
                                    </li>
                                </ul>
                            </li>
                            <li data-v-53a1e929="" class="item">
                                <div data-v-53a1e929="" class="title">
                                    <div data-v-53a1e929="" class="title-label"></div>
                                    <div data-v-53a1e929="" class="text">一节课多长时间啊？孩子坐得住吗？</div>
                                </div>
                                <ul data-v-53a1e929="" class="content">
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">
                                            每节课25分钟左右；AI趣味互动教学，1对2小班授课，同龄学伴组队PK，学得好得星星换礼物，成倍激发学习兴趣，学了3个月了，现在都主动要上课，习惯特别好
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li data-v-53a1e929="" class="item">
                                <div data-v-53a1e929="" class="title">
                                    <div data-v-53a1e929="" class="title-label"></div>
                                    <div data-v-53a1e929="" class="text">包邮赠送教材礼盒是真的吗？多久可以收到？</div>
                                </div>
                                <ul data-v-53a1e929="" class="content">
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">购买后填写好正确地址，3-5个工作日配送，大概一周左右就能收到礼包了，还挺快的
                                        </div>
                                    </li>
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">送礼盒是真的，发货后会有短信通知，或者在【叮咚课堂】APP-收货信息里查询进度
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li data-v-53a1e929="" class="item">
                                <div data-v-53a1e929="" class="title">
                                    <div data-v-53a1e929="" class="title-label"></div>
                                    <div data-v-53a1e929="" class="text">上课形式是怎样的？购买后如何上课？</div>
                                </div>
                                <ul data-v-53a1e929="" class="content">
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">
                                            用手机、pad随时随地都能预约上课（全天支持多时段预约）课上能与外教老师高频互动说英语，通过游戏化场景巩固学习知识点；购买后下载【叮咚课堂】APP登录后，即可预约上课了~
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li data-v-53a1e929="" class="item">
                                <div data-v-53a1e929="" class="title">
                                    <div data-v-53a1e929="" class="title-label"></div>
                                    <div data-v-53a1e929="" class="text">如何添加老师？一般多久通过好友申请？</div>
                                </div>
                                <ul data-v-53a1e929="" class="content">
                                    <li data-v-53a1e929="" class="answer">
                                        <div data-v-53a1e929="" class="answer-label"></div>
                                        <div data-v-53a1e929="" class="text">
                                            购买后会有短信通知，短信里会有老师联系方式，直接添加好友~；一般一两个小时就通过好友申请了~</div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script>
             /*获取HTML中的对象*/
    var parent = document.getElementById("parent");
    var img_ul = document.getElementById("img_ul");
    var litCir_ul = document.getElementById("litCir_ul");
    var buttons = document.getElementById("buttons");
    var cLis =litCir_ul.children;

    var len = img_ul.children.length;     //图片张数
    var width = parent.offsetWidth;       //每张图片的宽度
    var rate = 15;                        //一张图片的切换速度， 单位为px
    var times = 1;                        //切换速度的倍率
    var gap = 2000;                       //自动切换间隙， 单位为毫秒
    var timer = null;                     //初始化一个定时器
    var picN = 0;                         //当前显示的图片下标
    var cirN = 0;                         //当前显示图片的小圆点下标
    var temp;
    for (var i=0; i<len; i++){
        var a_li = document.createElement("li");
        a_li.className = 'quiet';
        litCir_ul.appendChild(a_li);
    }
    litCir_ul.children[0].className = "active";
    function Roll(distance){                                         //参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器！
var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向

img_ul.timer = setInterval(function(){                           //设置定时器，每隔10毫秒，调用一次该匿名函数
    img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
    var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      
    /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
    if (Math.abs(leave) <= Math.abs(speed)) {                    
        clearInterval(img_ul.timer);
        img_ul.style.left = distance + "px";
    }
},10);
}
img_ul.appendChild(img_ul.children[0].cloneNode(true));

function autoRun(){
    picN++;
    cirN++;
    if(picN > len){                  //滚动完克隆项后
        img_ul.style.left = 0;       //改变left至真正的第一项处
        picN = 1;                    //从第二张开始显示
    }
    Roll(-picN*width);
    
    if(cirN > len-1){                //判断是否到了最后一个圆点
        cirN = 0;                 
    }
    for(var i=0; i<len; i++){
        cLis[i].className = "quiet";
    }
    cLis[cirN].className = "active";
}
for(var i=0; i<len; i++){
        cLis[i].index = i;
        cLis[i].onmouseover = function(){
            for(var j=0; j<len; j++){
                cLis[j].className = "quiet";
            }
            this.className = "active";
            temp = cirN;
            picN = cirN = this.index;
            times = Math.abs(this.index - temp);  //距离上个小圆点的距离
            rate = rate*times;                    //根据距离改变切换速率
            Roll(-this.index * width);
            rate = 1000;
        }
    }
    parent.onmouseover = function(){
        clearInterval(timer);
        buttons.style.display = 'block';
    }
    parent.onmouseout = function(){
        timer = setInterval(autoRun, gap);
        buttons.style.display = 'none';
    }
        /*上一张*/
        buttons.children[0].onclick = function(){ 
        picN--;
        cirN--;
        if(picN < 0){                               //滚动完第一项后
            img_ul.style.left = -len*width + "px";  //改变left至克隆的第一项处
            picN = cirN = len-1;
        }
        Roll(-picN*width);
        //bug处理
        if(cirN < 0){
            cirN = len-1;
        }
        for(var i=0; i<len; i++){
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }
    /*下一张*/
    buttons.children[1].onclick = autoRun;
    setInterval(() => {
        autoRun();
    }, 4000);
    /*克隆第一个li到列表末*/
     </script>  
    <script type="text/javascript" src="./叮咚课堂_files/manifest.e3a55c84.js"></script>
    <script type="text/javascript" src="./叮咚课堂_files/common.42b427d8.js"></script>
    <script type="text/javascript" src="./叮咚课堂_files/app.752def2f.js"></script>
</body>

</html> -->